<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        canvas{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<canvas id="box" width="600" height="600">您的浏览器不支持画布</canvas>
<script type="text/javascript">
    var box=document.getElementById("box");
    var pen=box.getContext("2d");
    pen.clearRect(0,0,box.width,box.height);
    pen.save();
    pen.translate(300,300);
    pen.arc(0,0,200,0,Math.PI*2);
    pen.stroke();
    pen.restore();
    for(var i= 1;i<=12;i++){
        pen.beginPath();
        pen.save();
        pen.translate(300,300);
        pen.rotate(Math.PI/180*30*i);
        pen.moveTo(0,-180);
        pen.lineTo(0,-200);
        pen.stroke();
        pen.restore();
        pen.closePath();
    }
    for(var i= 1;i<=60;i++){
        pen.beginPath();
        pen.save();
        pen.translate(300,300);
        pen.rotate(Math.PI/180*6*i);
        pen.moveTo(0,-190);
        pen.lineTo(0,-200);
        pen.stroke();
        pen.restore();
        pen.closePath();
    }
</script>
</body>
</html>